<template>
  <div class="ai-platform">
    <!-- 背景Canvas元素 -->
    <canvas ref="backgroundCanvas" class="background-canvas"></canvas>

    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="container">
        <div class="logo">
          <!--          <img src="https://via.placeholder.com/120x40" alt="紫东太初" />-->
        </div>
        <div class="nav">
          <div class="nav-item">首页</div>
          <div class="nav-item dropdown">
            产品中心
            <span class="dropdown-icon">▼</span>
          </div>
          <div class="nav-item dropdown">
            行业解决方案
            <span class="dropdown-icon">▼</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 标题区域 -->
      <div class="title-section">
        <h1>能源大模型</h1>
      </div>

      <!-- 选项卡区域 -->
      <div class="tabs">
        <div
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab"
            :class="{ active: activeTabIndex === index }"
            @click="activeTabIndex = index"
        >
          {{ tab.name }}
        </div>
      </div>

      <!-- 能力展示区域 -->
      <div class="capabilities-section">
        <div
            v-for="(capability, index) in currentTab.capabilities"
            :key="index"
            class="capability-card"
            @mouseenter="highlightCard($event)"
            @mouseleave="resetCardHighlight($event)"
        >
          <div class="capability-icon">
            <img :src="capability.icon" alt="能力图标" class="icon-image" />
          </div>
          <div class="capability-content">
            <h3 class="capability-title">{{ capability.title }}</h3>
            <p class="capability-description">{{ capability.description }}</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

// 定义标签页数据
const tabs = [
  {
    name: '可再生发电',
    capabilities: [
      {
        title: '风电',
        icon: 'src/assets/风电场.svg',
        description: '利用风能驱动风机发电，属于清洁、可再生能源，对环境影响小，无碳排放。'
      },
      {
        title: '光伏',
        icon: 'src/assets/光伏.svg',
        description: '利用太阳能光伏板将光能转化为电能，同样属于可再生能源，资源可持续且清洁。'
      },
      {
        title: 'XXXX',
        icon: 'src/assets/光伏发电.svg',
        description: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
      }
    ]
  },
  {
    name: '化石能源发电',
    capabilities: [
      {
        title: '煤矿',
        icon: 'src/assets/煤矿.svg',
        description: '属于不可再生的化石燃料，主要成分为煤炭，是传统能源的重要资源基础。'
      },
      {
        title: '火电',
        icon: 'src/assets/火电站.svg',
        description: '以煤炭、天然气等化石燃料为能源，通过燃烧发电，属于高碳排放的传统发电方式。'
      },
      {
        title: 'XXX',
        icon: 'src/assets/光伏发电.svg',
        description: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
      }
    ]
  },
  {
    name: 'XXX发电',
    capabilities: [
      {
        title: 'XXX',
        icon: 'https://via.placeholder.com/100/6e4cff/ffffff?text=知识图谱',
        description: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
      },
      {
        title: 'XXX',
        icon: 'https://via.placeholder.com/100/6e4cff/ffffff?text=多源检索',
        description: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
      },
      {
        title: 'XXX',
        icon: 'https://via.placeholder.com/100/6e4cff/ffffff?text=实时更新',
        description: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
      }
    ]
  }
];

// 当前活跃的标签页索引
const activeTabIndex = ref(0);

// 计算当前应该显示的能力卡片
const currentTab = computed(() => tabs[activeTabIndex.value]);

// 背景动画相关变量
const backgroundCanvas = ref(null);
let ctx = null;
let animationFrameId = null;
let particles = [];

// 初始化画布和动画
function initCanvas() {
  const canvas = backgroundCanvas.value;
  ctx = canvas.getContext('2d');

  // 设置画布大小为窗口大小
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  // 初始调整大小
  resizeCanvas();

  // 监听窗口大小变化
  window.addEventListener('resize', resizeCanvas);

  // 初始化一些粒子
  initParticles();

  // 开始动画
  animate();
}

// 创建初始粒子
function initParticles() {
  particles = [];

  // 创建更多的静态粒子，增强背景效果
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      radius: Math.random() * 2 + 1,
      color: `rgba(111, 76, 255, ${Math.random() * 0.5})`,
      vx: Math.random() * 0.5 - 0.25,
      vy: Math.random() * 0.5 - 0.25,
      type: 'static'
    });
  }
}

// 动画循环
function animate() {
  animationFrameId = requestAnimationFrame(animate);

  // 清除画布
  ctx.fillStyle = 'rgba(10, 5, 49, 0.2)';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  // 更新和绘制粒子
  updateParticles();
}

// 更新所有粒子
function updateParticles() {
  for (let i = 0; i < particles.length; i++) {
    const p = particles[i];

    // 粒子移动逻辑
    p.x += p.vx;
    p.y += p.vy;

    // 如果超出边界，从另一端进入
    if (p.x < 0) p.x = ctx.canvas.width;
    if (p.x > ctx.canvas.width) p.x = 0;
    if (p.y < 0) p.y = ctx.canvas.height;
    if (p.y > ctx.canvas.height) p.y = 0;

    // 绘制粒子
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
  }

  // 绘制粒子之间的连线
  drawLines();
}

// 绘制粒子之间的连线
function drawLines() {
  const maxDistance = 150;

  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const p1 = particles[i];
      const p2 = particles[j];

      const dx = p1.x - p2.x;
      const dy = p1.y - p2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < maxDistance) {
        // 计算基于距离的透明度
        const opacity = 1 - distance / maxDistance;

        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.strokeStyle = `rgba(111, 76, 255, ${opacity * 0.2})`;
        ctx.lineWidth = 0.5;
        ctx.stroke();
      }
    }
  }
}

// 卡片悬浮效果
function highlightCard(event) {
  const card = event.currentTarget;
  card.classList.add('card-highlight');
}

function resetCardHighlight(event) {
  const card = event.currentTarget;
  card.classList.remove('card-highlight');
}

// 组件挂载时初始化
onMounted(() => {
  initCanvas();
});

// 组件卸载时清理
onUnmounted(() => {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
  }
  window.removeEventListener('resize', () => {});
});
</script>

<style scoped>
/* 新增对html和body的高度设置，确保视口100%高度 */
html, body {
  height: 100%;
  margin: 0;
}

.ai-platform {
  /* 将min-height改为height强制占满视口 */
  height: 100vh;
  /* 其他样式保持不变 */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(180deg, #0a0531 0%, #16125f 100%);
  width: 100%;
  padding: 0;
  color: white;
  overflow-x: hidden;
  position: relative;
}

/* 背景动画画布 */
.background-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 添加全局重置样式，确保没有默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  background-color: rgba(10, 5, 49, 0.8); /* 半透明背景 */
  backdrop-filter: blur(5px); /* 背景模糊效果 */
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.nav {
  display: flex;
  gap: 40px;
}

.nav-item {
  cursor: pointer;
  position: relative;
  font-size: 16px;
  transition: color 0.3s ease;
  padding: 8px 12px; /* 添加内边距增加点击区域 */
}

.nav-item:hover {
  color: #6f4cff;
}

.dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dropdown-icon {
  font-size: 12px;
}

.main-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 30px;
  position: relative;
  z-index: 1;
}

.title-section {
  text-align: center;
  margin-bottom: 60px;
}

.title-section h1 {
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(111, 76, 255, 0.5); /* 添加文字阴影效果 */
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
  position: relative;
  z-index: 10; /* 添加z-index */
}

.tab {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 12px 25px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.tab:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(45deg, transparent, rgba(111, 76, 255, 0.2), transparent);
  transition: all 0.5s;
}

.tab:hover:before {
  top: -50%;
  left: -50%;
}

.tab.active {
  background: rgba(111, 76, 255, 0.5);
  box-shadow: 0 0 15px rgba(111, 76, 255, 0.5);
}

/* 调整能力展示区域的样式，以适应新的卡片高度 */
.capabilities-section {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  /* 去掉上边距，因为卡片已经有了margin-top */
  margin-top: 30px;
  z-index: 1;
}

.capability-card {
  flex: 1;
  background: rgba(35, 29, 92, 0.5);
  border-radius: 15px;
  padding: 80px 25px 30px; /* 增加顶部内边距给图标留更多空间 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s ease;
  height: 350px;
  position: relative;
  margin-top: 60px; /* 减小顶部边距，让卡片向上移动 */
  justify-content: space-between;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: visible; /* 改为visible允许图标溢出 */
  z-index: 0;
}

.capability-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(111, 76, 255, 0.3);
}

/* 添加卡片高亮效果 */
.card-highlight {
  background: rgba(77, 59, 140, 0.65);
  box-shadow: 0 15px 30px rgba(111, 76, 255, 0.4);
}

.card-highlight .capability-title {
  color: #a992ff;
}

/* 卡片内部光效 */
.capability-card:after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(111, 76, 255, 0.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
}

.capability-card:hover:after {
  opacity: 1;
}

.capability-icon {
  position: absolute;
  top: -50px; /* 调整位置让图标更多地显示在卡片外 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  /* 添加3D变换 */
  transform-style: preserve-3d;
  perspective: 1000px;
}

.capability-card:hover .capability-icon {
  transform: translateX(-50%) scale(1.1);
}

.icon-image {
  /* 控制图片大小 */
  width: 120px;
  height: 120px;
  /* 可以添加一些效果使图标更加突出 */
  filter: drop-shadow(0 5px 15px rgba(111, 76, 255, 0.4));
  transition: filter 0.5s;
  /* 确保SVG颜色显示正确 */
  color: currentColor;
  /* 设置固定颜色，根据你提供的图像使用红色 */
  fill: #FF3300;
  /* 添加pointer-events:none防止图标捕获鼠标事件 */
  pointer-events: none;
}

.capability-card:hover .icon-image {
  filter: drop-shadow(0 8px 25px rgba(111, 76, 255, 0.7));
}

.capability-title {
  font-size: 30px; /* 增大标题字号 */
  margin-bottom: 25px; /* 增加与描述文本的间距 */
  font-weight: bold;
  /* 去掉顶部边距，因为有图标占位了 */
  margin-top: 0;
  /* 添加文字过渡效果 */
  transition: color 0.5s;
}

.capability-description {
  font-size: 18px; /* 增大描述文字字号 */
  line-height: 1.8; /* 稍微增加行高以提高可读性 */
  color: rgba(255, 255, 255, 0.8);
  /* 可以控制文字的最大宽度，使其更集中 */
  max-width: 90%;
  margin: 0 auto; /* 水平居中 */
  transition: color 0.5s;
}

.capability-card:hover .capability-description {
  color: rgba(255, 255, 255, 0.95);
}

/* 添加内容容器，更好地组织卡片内的文本内容 */
.capability-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 让内容占据卡片大部分空间 */
  flex-grow: 0.5;
  /* 添加一些上部间距，与图标保持适当距离 */
  padding-top: 5px;
  /* 确保内容垂直居中分布 */
  justify-content: center;
  /* 添加pointer-events: all确保内容区域可以正常接收鼠标事件 */
  pointer-events: all;
}

/* 调整能力展示区域的样式，以适应新的卡片高度 */
.capabilities-section {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  /* 去掉上边距，因为卡片已经有了margin-top */
  margin-top: 30px;
}
</style>